<template>
  <div>
    <h2>App</h2>
    <p>count:{{ count }}</p>
    <button @click="increment">累加count</button>
    <button @click="incrementN({ n: 5 })">累加N count</button>
    <button @click="decrement">累减count</button>
    <button @click="incrementWait">等两秒累加count</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'App',
  mounted() {
    console.log(this, 'app');

    // mapState的使用，参数是一个数组，数组内是我们要去store拿的值
    // mapState返回一个对象，对象内部其实就是读取值的对应的计算属性的方法
    const result = mapState(['count', 'num']);
    console.log(result);
    // 在测试的时候，直接调用count方法，因为this不是指向组件实例，所以看不出来效果
    // 可以强制把count方法中的this改为组件实例，可以看到效果
  },
  // computed: {
  //   // 获取state中count的值
  //   count() {
  //     return this.$store.state.count;
  //   },
  //   num() {
  //     return this.$store.state.num;
  //   },
  // },
  // computed: mapState(['count', 'num']),

  computed: {
    ...mapState(['count', 'num']),
  },
  methods: {
    ...mapMutations(['increment', 'decrement', 'incrementN', 'incrementWait']),
  },
};
</script>
<style></style>
